@mixin button-color($color) {
  color: $color;
  cursor: pointer;
  &:hover, &:focus {
    color: mix($white, $color, 20%)
  }

  &:active {
    color: mix($black, $color, 10%);
  }
}

.el-button {
  &.btn-danger {
    @include button-color($--color-danger)
  }

  &.btn-success {
    @include button-color($--color-success)
  }

  &.btn-warning {
    @include button-color($--color-warning)
  }

}
